<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script>
        window.onload = function() {
            var div1 = document.getElementById("div1").innerHTML;
            var div2 = document.getElementById("div2").innerHTML;
            function onBtnClick(id,txt) {
                document.getElementById(id).onclick = function() {
                    this.nextSibling.innerHTML = txt;
                    //他的下一个兄弟 内容变成 txt
                }
            }
            onBtnClick("btn1",div1.concat(div2));
            onBtnClick("btn2",div1.slice(3));  // 从第3个开始取，一直取到最后
            onBtnClick("btn3",div1.slice(3,6));  // 3 从 第3个开始 取     6  取到第6索引号的位置，还是从左边的第0个开始数。 但是不包 6 。
            onBtnClick("btn4",div1.slice(-1));  // 从右边开始取

            //substr组

            onBtnClick("btn5",div1.substr(3));  //
            onBtnClick("btn6",div1.substr(3,6));  //
            onBtnClick("btn7",div1.substr(div1.length-1,1));  // 兼容的写法

           // substring 组

            onBtnClick("btn8",div1.slice(6,3));
            onBtnClick("btn9",div1.substring(6,3));




        }
    </script>
</head>
<body>
<div id="div1">my name is andy!</div>

<div id="div2">what's your name?</div>
<button id="btn1">concat</button><span></span> <br/>
<button id="btn2">slice(3)</button><span></span> <br/>
<button id="btn3">slice(3,6)</button><span></span> <br/>
<button id="btn4">slice(-1)</button><span></span> <br/>


<button id="btn5">substr(3)</button><span></span> <br/>
<button id="btn6">substr(3，6)</button><span></span> <br/>
<button id="btn7">substr(-1) 兼容</button><span></span> <br/>
区别
<button id="btn8">slice(6,3)</button><span></span> <br/>
<button id="btn9">substring(6,3)</button><span></span> <br/>